<template>
	<!-- 控制开关 -->
	<div class="control-buttons-group">
		<div data-desc="全屏">
			<fullscreen class-name="svg-icon" @click="onFullscreen"></fullscreen>
		</div>
		<div data-desc="刷新">
			<refresh class-name="svg-icon" @click="onRefresh"></refresh>
		</div>
		<div data-desc="返回主页">
			<homeFill class-name="svg-icon"></homeFill>
		</div>
	</div>
</template>

<script setup name="control-buttons">
import fullscreen from '../../svg/fullscreen-expand.vue'
import homeFill from '../../svg/home-fill.vue'
import refresh from '../../svg/refresh.vue'

import { useFullscreen } from '@vueuse/core'

const { isFullscreen, toggle } = useFullscreen()

const onFullscreen = async() => {
  console.log('当前是否为全屏', isFullscreen.value);
  await toggle()
}

const onRefresh = () => {
  window.location.reload()
}
</script>

<style lang="scss" scoped>
  .control-buttons-group {
    position: absolute;
    top: 50px;
    right: 28px;
    display: flex;
    column-gap: 20px;
  }

  .svg-icon {
    width: 24px;
    height: 24px;
    fill: #fff;
  }
</style>
